<template>
  <section id="moments" class="py-16 bg-white">
    <div class="container mx-auto px-4">
      <SectionTitle title="生活瞬间" subtitle="那些平凡日子里的闪光时刻，构成了生活的全部意义" />

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <MomentCard v-for="(moment, index) in moments" :key="index" :moment="moment" />
      </div>

      <div class="mt-10 text-center">
        <router-link to="/moments"
          class="inline-flex items-center gap-2 text-primary hover:text-primary/80 font-medium transition-colors">
          查看更多瞬间 <i class="fa fa-long-arrow-right"></i>
        </router-link>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import SectionTitle from '@/components/ui/SectionTitle.vue'
import MomentCard from '@/components/cards/MomentCard.vue'
import { momentsData } from '@/data/moments.js'

const moments = ref(momentsData)
</script>